<!doctype html>
<html lang="zh-cn" class="fullscreen-bg" xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<!-- MAIN -->
<!-- Page Content Starts -->
<div th:fragment="main" class="content-wrapper">

    <section class="content-header">
        <h1>
            首页
            <small>控制面板</small>
        </h1>
        <!--面包屑页面路径-->
        <ol class="breadcrumb">
            <li><a href="index"><i class="fa fa-dashboard"></i>1</a></li>
            <li><a href="#">2</a></li>
            <li class="active">3</li>
        </ol>
    </section>
    <!-- Counters Section Starts -->
    <div class="dashboard1">
        <div class="row">
            <div class="col-xl-3 col-lg-6 col-12">
                <div class="counter-box">
                    <div class="shadow bg1">
                        <div class="text-white text-center">
                            <i class="fa fa-user-o fa-2x"></i>
                            <div class="mt-2">访客量</div>
                            <h3 class="mt-1 count">10000</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6 col-12">
                <div class="counter-box">
                    <div class="shadow bg2">
                        <div class="text-center text-white">
                            <i class="fa fa-money fa-2x"></i>
                            <div class="mt-2">交易额</div>
                            <div class="money"><h3>$</h3><h3 class="mt-1 count">75800</h3></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6 col-12">
                <div class="counter-box">
                    <div class="shadow bg3">
                        <div class="text-center text-white">
                            <i class="fa fa-thumbs-o-up fa-2x"></i>
                            <div class="mt-2">收藏量</div>
                            <h3 class="mt-1 count">5000</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6 col-12">
                <div class="counter-box">
                    <div class="shadow bg4">
                        <div class="text-center text-white">
                            <i class="fa fa-opencart fa-2x"></i>
                            <div class="mt-2">授权数</div>
                            <h3 class="mt-1 count">7000</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Counters Section Ends -->
        <!-- Chart Section Starts -->
        <div class="row chartjs">
            <div class="col-xl-6 col-lg-6 col-12">
                <div class="cardbg">
                    <h6 class="title-inner text-uppercase">用户增长率</h6>
                    <div class="chart-wrapper">
                        <canvas id="grouped-bar-chart"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-lg-6 col-12">
                <div class="cardbg">
                    <h6 class="title-inner text-uppercase">全网用户数</h6>
                    <div class="chart-wrapper">
                        <canvas id="multiline-doughnut-chart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <!-- Chart Section Ends -->
        <!-- Client Section Starts -->
        <div class="row">
            <div class="col-xl-9 col-lg-6 col-12">
                <div class="cardbg">
                    <h6 class="title-inner text-uppercase">客户列表</h6>
                    <div class="table-responsive">
                        <table class="table m-0 table-striped">
                            <thead>
                            <tr>
                                <th>姓名</th>
                                <th>英文名</th>
                                <th>代表作</th>
                                <th>人气</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>周杰伦</td>
                                <td>Jay</td>
                                <td>《东风破》、《千里之外》</td>
                                <td>1020</td>
                            </tr>
                            <tr>
                                <td>周杰伦</td>
                                <td>Jay</td>
                                <td>《东风破》、《千里之外》</td>
                                <td>1020</td>
                            </tr>
                            <tr>
                                <td>周杰伦</td>
                                <td>Jay</td>
                                <td>《东风破》、《千里之外》</td>
                                <td>1020</td>
                            </tr>
                            <tr>
                                <td>周杰伦</td>
                                <td>Jay</td>
                                <td>《东风破》、《千里之外》</td>
                                <td>1020</td>
                            </tr>
                            <tr>
                                <td>周杰伦</td>
                                <td>Jay</td>
                                <td>《东风破》、《千里之外》</td>
                                <td>1020</td>
                            </tr>
                            <tr>
                                <td>周杰伦</td>
                                <td>Jay</td>
                                <td>《东风破》、《千里之外》</td>
                                <td>1020</td>
                            </tr>
                            <tr>
                                <td>周杰伦</td>
                                <td>Jay</td>
                                <td>《东风破》、《千里之外》</td>
                                <td>1020</td>
                            </tr>
                            <tr>
                                <td>周杰伦</td>
                                <td>Jay</td>
                                <td>《东风破》、《千里之外》</td>
                                <td>1020</td>
                            </tr>
                            <tr>
                                <td>周杰伦</td>
                                <td>Jay</td>
                                <td>《东风破》、《千里之外》</td>
                                <td>1020</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- Client Section Ends -->
            <!-- Profile Section Starts -->
            <div class="col-xl-3 col-lg-6 col-12">
                <div class="cardbg">
                    <img class="card-img-top" th:src="@{static/cms/assets/images/user3-160x160.jpg}" alt="Card image">
                    <div class="card-body">
                        <h4 class="card-title">叶惠美</h4>
                        <p class="card-text">
                            周杰伦的母亲，原台湾林口中学的美术老师。
                            周杰伦是单亲家庭长大的，从小就是妈妈和外婆带大的。外婆和妈妈，是周杰伦很敬爱的两位女人。
                        </p>
                        <a href="https://baike.baidu.com/item/%E5%8F%B6%E6%83%A0%E7%BE%8E/2325933"
                           class="btn btn-primary" target="_blank">查看更多</a>
                    </div>
                </div>
            </div>
            <!-- Profile Section Ends -->
        </div>
        <div class="row">
            <!-- Order Section Starts -->
            <div class="col-xl-4 col-lg-6 col-12">
                <div class="cardbg">
                    <h6 class="title-inner text-uppercase">订单完成量</h6>
                    <div class="progress-section">
                        <div class="progress-title mb-2">
                            <span class="title">iPhone 11 Pro</span>
                            <span class="float-right">10%</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                    <div class="progress-section">
                        <div class="progress-title mb-2">
                            <span class="title">小米9全面屏</span>
                            <span class="float-right">40%</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped bg-info progress-bar-animated" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                    <div class="progress-section">
                        <div class="progress-title mb-2">
                            <span class="title">HuaWei Mate30</span>
                            <span class="float-right">50%</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped bg-warning progress-bar-animated" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                    <div class="progress-section">
                        <div class="progress-title mb-2">
                            <span class="title">红米Note3</span>
                            <span class="float-right">70%</span>
                        </div>
                        <div class="progress mb-0">
                            <div class="progress-bar progress-bar-striped bg-danger progress-bar-animated" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Order Section Ends -->
            <!-- Order Review Section Starts -->
            <div class="col-xl-4 col-lg-6 col-12">
                <div class="cardbg">
                    <h6 class="title-inner text-uppercase">评价订单</h6>
                    <div class="progress-section">
                        <div class="progress-title mb-2">
                            <span class="title">好评量</span>
                            <span class="float-right">1000</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar progress-bar-animated" role="progressbar" style="width: 90%" aria-valuenow="1000" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                    <div class="progress-section">
                        <div class="progress-title mb-2">
                            <span class="title">中评量</span>
                            <span class="float-right">900</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar bg-info progress-bar-animated" role="progressbar" style="width: 75%" aria-valuenow="900" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                    <div class="progress-section">
                        <div class="progress-title mb-2">
                            <span class="title">差评量</span>
                            <span class="float-right">800</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar bg-warning progress-bar-animated" role="progressbar" style="width: 60%" aria-valuenow="800" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                    <div class="progress-section">
                        <div class="progress-title mb-2">
                            <span class="title">未评价</span>
                            <span class="float-right">100</span>
                        </div>
                        <div class="progress mb-0">
                            <div class="progress-bar bg-danger progress-bar-animated" role="progressbar" style="width: 20%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Order Review Section Ends -->
            <!-- Social Section Starts -->
            <div class="col-xl-4 col-lg-12 col-12">
                <div class="cardbg">
                    <h6 class="title-inner text-uppercase">社交平台人气</h6>
                    <div class="progress-section">
                        <div class="progress-title mb-2">
                            <span class="title"><i class="fa fa-instagram"></i></span>
                            <span class="float-right instagram">Instgram</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar bg-insta progress-bar-striped progress-bar-animated" role="progressbar" style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">45%</div>
                        </div>
                    </div>
                    <div class="progress-section">
                        <div class="progress-title mb-2">
                            <span class="title"><i class="fa fa-twitter"></i></span>
                            <span class="float-right twitter">Twitter</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped bg-twitter progress-bar-animated" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div>
                        </div>
                    </div>
                    <div class="progress-section">
                        <div class="progress-title mb-2">
                            <span class="title"><i class="fa fa-facebook"></i></span>
                            <span class="float-right facebook">Facebook</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped bg-facebook progress-bar-animated" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
                        </div>
                    </div>
                    <div class="progress-section">
                        <div class="progress-title mb-2">
                            <span class="title"><i class="fa fa-linkedin"></i></span>
                            <span class="float-right linkedin">Linkedin</span>
                        </div>
                        <div class="progress mb-0">
                            <div class="progress-bar progress-bar-striped bg-linkedin progress-bar-animated" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70%</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Social Section Ends -->
        </div>
    </div>

    <div class="main_links">
        <!-- main Page JS -->
        <script th:src="@{static/cms/assets/js/charts/Chart.bundle.min.js}"></script>
        <script th:src="@{static/cms/assets/js/charts/bar/grouped-bar-chart.js}"></script>
        <script th:src="@{static/cms/assets/js/charts/pie/doughnut-chart-multiline.js}"></script>
        <script th:src="@{static/cms/assets/js/dashboard/dashboard1.js}"></script>
    </div>
</div>
<!-- Page Content Ends -->
<!-- END MAIN -->
</body>
</html>
